<template>
	<view>
		<u-notify ref="uNotify"></u-notify>
		<u-picker :show="show" @confirm="confirm" :columns="columns" keyName="label"></u-picker>
		<view class="addForm">
			<view class="formBox">
				<u--form :model="FormData" ref="FormData" :rules="rules" labelWidth=100>
					<u-form-item label="姓名" prop="name" borderBottom>
						<u-input v-model="FormData.name" border="none" placeholder="请填写姓名" inputAlign="right"></u-input>
					</u-form-item>
					<u-form-item label="性别" prop="sex" borderBottom labelWidth="50%">
						<view style="width: 50%;float: right;position: relative;margin-bottom: 10%;">
							<u-radio-group v-model="FormData.sex" placement="row" activeColor="#0782C9">
								<view style="position: absolute;right: -80rpx;">
									<u-radio label="男" :customStyle="{marginRight: '20rpx'}" :name="1"></u-radio>
								</view>
								<view style="position: absolute;right: -180rpx;">
									<u-radio label="女" :customStyle="{marginRight: '20rpx'}" :name="0"></u-radio>
								</view>
							</u-radio-group>
						</view>
					</u-form-item>
					<u-form-item label="手机号码" prop="phoneNumber" borderBottom>
						<u-input v-model="FormData.phoneNumber" border="none" placeholder="请填写手机号" inputAlign="right" type="number"></u-input>
					</u-form-item>
					<u-form-item label="身份证号" prop="idCard" borderBottom>
						<u-input v-model="FormData.idCard" border="none" placeholder="请填写身份证号" inputAlign="right" type="idcard"></u-input>
					</u-form-item>
					<u-form-item @click="btnGx" label="与就诊人关系" prop="gx" borderBottom>
						<u-input v-model="FormData.gx" border="none" placeholder="请选择" inputAlign="right" readonly></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="行动是否方便" prop="act" labelWidth="50%">
						<view style="width: 50%;float: right;position: relative;margin-bottom: 10%;">
							<u-radio-group v-model="FormData.act" placement="row" activeColor="#0782C9">
								<view style="position: absolute;right: -80rpx;">
									<u-radio label="是" :customStyle="{marginRight: '20rpx'}" :name="1"></u-radio>
								</view>
								<view style="position: absolute;right: -180rpx;">
									<u-radio label="否" :customStyle="{marginRight: '20rpx'}" :name="0"></u-radio>
								</view>
							</u-radio-group>
						</view>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view class="addfoot">
			<view class="addBtn" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				columns: [
					[   
						{
							label: '本人',
							id: 1
						},
						{
							label: '父母',
							id: 2
						},
					]
				],
				FormData: {
					name: '',
					sex: 1,
					act: 1,
					gx: ''
				},
				rules: {
					name: [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}],
					phoneNumber: [{
						type: 'string',
						required: true,
						message: '请填写手机号码',
						trigger: ['blur', 'change']
					}],
					gx: [{
						type: 'string',
						required: true,
						message: '请选择与就诊人关系',
						trigger: ['blur', 'change']
					}],
					idCard: [{
						type: 'string',
						required: true,
						message: '请输入身份证号',
						trigger: ['blur', 'change']
					}],
				}
			}
		},
		// onReady() {
		// 	// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
		// 	this.$refs.uForem.setRules(this.rules)
		// },
		methods: {
			onNotify(type,msg) {
				this.$refs.uNotify.show({
					type: type,
					message: msg,
					duration: 1000 * 3
				})
			},
			submit() {
				this.$refs.FormData.validate().then(res => {
					this.onNotify('success','校验通过');
				}).catch(errors => {
					this.onNotify('error','校验失败');
				})
			},
			btnGx() {
				this.show = true;
			},
            confirm(e){
				this.FormData.gx = e.value[0].label;
				this.show = false;
			},
			checkboxChange() {
				this.checked = !this.checked;
				console.log(this.checked);
			}
		}
	}
</script>

<style lang="scss">
	body {
		background-color: $uni-bg-color-grey;
	}

	.addForm {
		padding: 20rpx;
	}

	.formBox {
		background: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		box-shadow: 3rpx 3rpx 6rpx 0 #D3D0D0;
		padding: 0 20rpx;
	}

	.u-form-item__body__right__message.data-v-067e4733 {
		text-align: right;
	}

	.addfoot {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 140rpx;
		box-shadow: 0 -5rpx 10rpx #D3D0D0;
	}

	.addBtn {
		width: 90%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background: linear-gradient(to left, $uni-aicloud, $uni-aicloud-gradation);
		color: #ffffff;
		font-size: 28rpx;
		border-radius: 80rpx;
		margin: 30rpx auto;

	}
</style>